<template>
  <!-- 会员状态操作 -->
  <u-dialog :title="title" :show.sync="show" width="1040px" :auto-close="false" :footer="true" @cancel="cancel" @confirm="confirm">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="100px">

      <el-row>
        <el-col :span="12">

          <el-form-item prop="member_name" label="姓名">
            <el-input v-model="dataForm.member_name" placeholder="姓名" clearable disabled minlength="1" maxlength="20" show-word-limit />
          </el-form-item>

          <el-form-item prop="mobile" label="手机号">
            <el-input v-model="dataForm.mobile" placeholder="手机号" disabled maxlength="11" clearable show-word-limit />
          </el-form-item>

          <el-form-item prop="openid" label="OPENID">
            <el-input v-model="dataForm.openid" placeholder="微信公众号OPENID" disabled clearable />
          </el-form-item>

        </el-col>
        <el-col :span="12">

          <el-form-item prop="card_no" label="卡号">
            <el-input v-model="dataForm.card_no" placeholder="卡号" disabled clearable />
          </el-form-item>

          <el-form-item prop="level_name" label="等级">
            <el-input :value="dataForm.level_name" placeholder="等级" disabled clearable />
          </el-form-item>

          <el-form-item prop="card_id" label="ID">
            <el-input v-model="dataForm.card_id" placeholder="会员ID" disabled clearable />
          </el-form-item>

        </el-col>
      </el-row>

      <el-form-item prop="status" label="状态">
        <el-radio-group v-model="dataForm.status">
          <el-radio :label="0">正常</el-radio>
          <el-radio :label="-1">
            禁用
            <el-tooltip class="item" effect="dark" content="禁用后,支持恢复账号" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </el-radio>
          <el-radio :label="1">
            作废
            <el-tooltip class="item" effect="dark" content="确认顾客不要该账号！作废会注销该账号" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item prop="remark" label="备注">
        <el-input v-model="dataForm.remark" type="textarea" placeholder="请输入备注以方便追溯历史原因(必填)" clearable maxlength="200" show-word-limit />
      </el-form-item>

    </el-form>
  </u-dialog>

</template>

<script>
/**
 * 业务组件 - 会员状态操作
 */
export default {
  name: 'Status',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的数据 */
    data: {
      type: Object,
      default: data => {
        return ({
          card_id: '',
          member_name: ''
        })
      }
    }
  },
  data() {
    return {
      api: this.$u.api.Member,
      title: '会员状态',
      dataForm: {},
      rules: {
        remark: [
          { required: true, message: '请输入备注以方便追溯历史原因', trigger: ['blur'] }
        ]
      }
    }
  },
  watch: {
    show(newVal, oldVal) {
      // 监听是否弹框,决定是否初始化数据
      // console.log(newVal + '---------------' + oldVal)
      if (newVal) {
        this.dataForm = this.$u.deepClone(this.data)
        // console.log(this.dataForm)
        const { member_name } = this.dataForm
        this.title = '会员状态:查询【' + member_name + '】'
        const self = this
        self.$nextTick(() => {
          self.$refs['dataForm'].clearValidate()
        })
      }
    }
  },
  methods: {
    // 确认
    confirm() {
      const self = this
      self.$confirm('此操作将更改 【' + self.dataForm.member_name + '】 的会员状态，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 效验数据格式
        self.$refs['dataForm'].validate((valid) => {
          if (valid) {
            // 提交更新数据
            self.api.disable(self.dataForm).then(() => {
              // 通知信息
              self.$u.msg('更改成功')
              // 双向绑定数据
              self.$emit('changeShow', false)
              // 更新成功后传递
              self.$emit('change')
            })
          }
        })
      }).catch(() => {
      })

      self.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>
